﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
    <link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Css/css.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.jqprint-0.3.js"></script>
    <script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

    <script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/echarts.common.min.js"></script>
    <title></title>

    <script type="text/javascript">
        $(function () {
            //动态加载  店铺列表
            $("#shopName").combobox({
                url: pageConfig.getShopName,
                //action 
                valueField: "shopID",
                textField: "shopName"
            });
            if ($("#shopName").combobox('getValue') == 0) {
                $("#shopName").combobox('setValue', "")
            }
            $("#data").datagrid({
                fit: true,
              
                title: '支付方式统计',
                striped: true,
                rownumbers: true,
                showFooter: true,
                columns:
                    [[
                         { field: 'orderPay', title: '支付方式', width: 200, halign: 'center', sortable: true, align: 'center' },
                         { field: 'orderSumprice', title: '金额(RMB/元)', width: 200, halign: 'center', sortable: true, align: 'center' },
                           
                    ]],
                singleSelect: true,
                loadMsg: '正在加载数据,请耐心等待.......',
                url: pageConfig.getAction,
                queryParams: {
                    date1: $('#txtDate1').val(),
                    date2: $('#txtDate2').val(),
                    shopID: $("#shopName").combobox('getValue'),
                },
                sortName: 'orderTime',
                sortOrder: 'desc',
                toolbar: '#tool',

            });
        });
        var pageConfig = {
            getAction: '@Url.Action("GetOrderAll")',
            getChart: '@Url.Action("GetChart")',
            getShopName: '@Url.Action("GetShopName")',
        };

        function searchData() {
            //alert($("#shopName").combobox('getValue')); //获取到的是  id getText 应该是 获取到的name
            var start = $("#txtDate1").datebox('getValue');
            var end = $("#txtDate2").datebox('getValue');
            if (txtDate1.value > txtDate2.value) {
                alert("开始日期不能大于结束日期！");
                $("#txtDate1").textbox('setValue');//清空文本框的值
                $("#txtDate1").textbox('clear');
                $("#txtDate2").textbox('setValue');
                $("#txtDate2").textbox('clear');
                txtDate1.focus();
                txtDate2.focus();
                return false;
            }
            $("#data").datagrid('load', {
                date1: $('#txtDate1').val(),
                date2: $('#txtDate2').val(),
                storeid: $("#shopName").combobox('getValue'),
            });
            $.post("/PayMode/GetChartsByDate?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $('#shopName').combobox('getValue'),
                 function (result) {
                     var dataArray = [];
                     //请求成功时执行该函数内容，result即为服务器返回的json对象
                     $.each(result, function (index, item) {
                         //挨个取出类别并填入类别数 
                         dataArray.push({
                             name: item.payType,
                             value: item.money
                         });
                     });
                     dataArray = dataArray.reverse();
                     var myChart = echarts.init(document.getElementById('main'));
                     myChart.setOption({
                         color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                         title: {
                             text: '支付方式统计',
                             subtext: '饼状图',
                             left: 'center'
                         },
                         tooltip: {
                             trigger: 'item',
                             formatter: "{a} <br/>{b} : {c} 元({d}%)"
                         },
                         legend: {
                             bottom: 10,
                             left: 'center',
                             data: dataArray,   //提示工具  要显示的图标
                         },
                         series: [
                             {
                                 name: '支付方式统计',
                                 type: 'pie',
                                 radius: '65%',
                                 center: ['50%', '50%'],
                                 selectedMode: 'single',
                                 data: dataArray,
                             }
                         ],
                         itemStyle: {
                             emphasis: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                             }
                         }
                     });
                 })
         }
    </script>
    <script type="text/javascript">

        $.get(pageConfig.getChart,
          function (result) {
              var dataArray = [];
             // var names = [];
              //你这里不能用map函数   Teat
              //请求成功时执行该函数内容，result即为服务器返回的json对象
              $.each(result, function (index, item) {
                  //挨个取出类别并填入类别数 
                  dataArray.push({
                      name: item.payType,
                      value: item.money
                  });
              });
             // alert(names);
              dataArray = dataArray.reverse();
              var myChart = echarts.init(document.getElementById('main'));
              myChart.setOption({
                  color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                  title: {
                      text: '支付方式统计',
                      subtext: '饼状图',
                      left: 'center'
                  },
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b} : {c} 元({d}%)"
                  },
                  legend: {
                      bottom: 10,
                      left: 'center',
                      data: dataArray,   //提示工具  要显示的图标
                  },
                  series: [
                      {
                          name: '支付方式统计',
                          type: 'pie',
                          radius: '65%',
                          center: ['50%', '50%'],
                          selectedMode: 'single',
                          data: dataArray,
                      }
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              });
          })
    </script>

</head>
<body class="easyui-layout" style="width: 100%; height: 100%"  >
    <div data-options="region:'center'" >

        <table id="data" style="height: 80px"></table>
       
    </div>

    <div id="tool" style="padding: 30px;">
        <form id="formid" method='post' action='/OrderStatistic/Excel'>
        </form>
        <div>
            店铺名称：
                 <input id="shopName" class="easyui-combobox" name="shopName" />
            &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
               日期：<input id="txtDate1" type="text" class="easyui-datebox" />
            -- 
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
            &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">查询</a>

            <div style="margin-top: 20px;">
                <span style="font-size: larger; color: red">&nbsp&nbsp &nbsp&nbsp&nbsp   &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp   注意:默认显示为今天的支付方式</span>
                <br />
            </div>

        </div>

    </div>

    <div data-options="region:'south'" style="width: 50%; height: 400px;" >
        <span></span>
        <p id="main" style="width: 50%; height: 300px;"  align="left"></p>
    </div>


</body>

</html>
@*style="height: 310px  sorth" *@